<template>
    <el-dialog id="chooseCategoryDialog" title="发卡" v-model="openFlag" width="450" append-to-body @close="closeDialog">

      <div v-if="currentRow" style="margin-bottom: 20px;">
        <div class="send-card-row">
          <label>编码:</label>
          <div class="content">
            {{currentRow.number}}
          </div>
        </div>

        <div class="send-card-row">
          <label>名称:</label>
          <div class="content">
            {{currentRow.name}}
          </div>
        </div>
        <div class="send-card-row">
          <label>RFID:</label>
          <div class="content">
            {{currentRow.rfid}}
          </div>

        </div>
        <div class="send-card-row">
          <label>读取RFID:</label>
          <div class="content">
            <el-input v-model="rfid"></el-input>
          </div>
          <div>
            <el-button type="primary" @click="readTag">读卡</el-button>
          </div>
        </div>
      </div>


      <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="subData">盘点</el-button>
          <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
</template>
  
<script setup>

import api from "./api.js";
import { createSocket } from '@/utils/rfid.js'

const { proxy } = getCurrentInstance();

const openFlag = ref(false);
const currentRow = reactive({});
const rfid = ref('');
let socket;

const emit = defineEmits(['sub']);

function showRfidAlert(msg) {
  proxy.$modal.alert(msg);
}

/**
 * 创建RFID的连接
 */
function createRfidLink() {
  // 创建WebSocket服务器并监听指定端口
  return createSocket((data)=> {
    if (data) {
      if (data.length <=2) {
        switch (data) {
          case '10': showRfidAlert("操作成功"); break;
          case '11': showRfidAlert("操作失败"); break;
          case '32':showRfidAlert("读标签错误"); break;
          case '36':showRfidAlert("无可操作标签"); break;
          case '37':showRfidAlert("成功盘存但访问失败"); break;
          case 0x40:showRfidAlert("访问标签错误或密码错误"); break;
          case 0x41:showRfidAlert("无效的参数"); break;
          case 0x43:showRfidAlert("操作长度越界"); break;
          default: showRfidAlert("其他");
        }
      } else {
        rfid.value = data;
        console.log('收到标签：', data);
      }

    } else {
      proxy.$modal.alert("收到的RFID信息为空");
    }
  });
}


function open(row) {
  Object.assign(currentRow, row);
  openFlag.value = true;
  socket = createRfidLink();
}

function cancel() {
  openFlag.value = false;
  if (socket) {
    socket.close();
  }
}

function readTag() {
  socket.send("read-tag")
}

function subData() {

  api.inventory([currentRow.id]).then(() => {
    openFlag.value = false;
    emit('sub');
  });
}

defineExpose({
  open
})


</script>

<style lang="scss">

  .send-card-row {
    display: flex;
    label {
      width: 80px;
      line-height: 32px;
    }
    .content {
      flex-grow: 1;
      line-height: 32px;
    }
  }

  .send-card-board {
    display: flex;
    justify-content: center;
    .wifi-icon {
      width: 4em;
      height: 4em;
    }

  }
  .send-card-content {
    border: 2px dashed #ccc;
    height: 300px;
    padding: 20px;
  }

</style>
  